<!-- 车辆详情 -->
<template>
  <div class="dashboard-container vehicle-detail">
    <!-- teb切换 -->
    <div class="tab-bar">
      <h3
        v-for="(item, index) in title"
        :key="item"
        :class="{ active: currentIndex === index }"
        @click="tabChange(index)"
      >
        {{ item }}</h3>
    </div>
    <!-- 基本信息 -->
    <div
      v-if="currentIndex === 0"
      class="content"
    >
      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        class="form"
      >
        <el-form-item
          label="车辆编号"
          prop="id"
        >
          <span v-if="isShow">{{ formData.id }}</span>
          <el-input
            v-else
            v-model="formData.id"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="车牌号码"
          prop="licensePlate"
        >
          <span v-if="isShow">{{ formData.licensePlate }}</span>
          <el-input
            v-else
            v-model="formData.licensePlate"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="车型名称"
          prop="truckTypeName"
        >
          <span v-if="isShow">{{ formData.truckTypeName }}</span>
          <el-input
            v-else
            v-model="formData.truckTypeName"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="车辆体积"
          prop="allowableVolume"
        >
          <span v-if="isShow">{{ formData.allowableVolume }}</span>
          <el-input
            v-else
            v-model="formData.allowableVolume"
          >
          </el-input></el-form-item>
        <el-form-item
          label="车辆载重"
          prop="allowableLoad"
        >
          <span v-if="isShow">{{ formData.allowableLoad }}</span>
          <el-input
            v-else
            v-model="formData.allowableLoad"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="GPSID"
          prop="deviceGpsId"
        >
          <span v-if="isShow">{{ formData.deviceGpsId }}</span>
          <el-input
            v-else
            v-model="formData.deviceGpsId"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="图片信息"
          style="margin-left: 8px"
        >
          <img
            :src="formData.picture"
            alt=""
          >
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button
          v-if="isShow"
          type="warning"
          @click="editInfo"
        >编辑</el-button>
        <div
          v-else
          class="btn"
        >
          <el-button>取消</el-button>
          <el-button
            type="warning"
            @click="editCarInfo"
          >保存</el-button>
        </div>
      </div>
    </div>
    <!-- 行驶证信息 -->
    <div
      v-else
      class="content"
    >
      <el-form
        ref="form2"
        :model="formData2"
        :rules="formRules2"
        class="form"
      >
        <el-form-item
          label="行驶证号码"
          prop="transportCertificateNumber"
        >
          <span v-if="isShow">{{ formData2.transportCertificateNumber }}</span>
          <el-input
            v-else
            v-model="formData2.transportCertificateNumber"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发动机号码"
          prop="engineNumber"
        >
          <span v-if="isShow">{{ formData2.engineNumber }}</span>
          <el-input
            v-else
            v-model="formData2.engineNumber"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="注册时间"
          prop="registrationDate"
        >
          <span v-if="isShow">{{ formData2.registrationDate }}</span>
          <el-date-picker
            v-else
            v-model="formData2.registrationDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="报废日期"
          prop="mandatoryScrap"
        >
          <span v-if="isShow">{{ formData2.mandatoryScrap }}</span>
          <el-date-picker
            v-else
            v-model="formData2.mandatoryScrap"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker></el-form-item>
        <el-form-item
          label="整备质量"
          prop="overallQuality"
        >
          <span v-if="isShow">{{ formData2.overallQuality }}</span>
          <el-input
            v-else
            v-model="formData2.overallQuality"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="检验有效期"
          prop="expirationDate"
        >
          <span v-if="isShow">{{ formData2.expirationDate }}</span>
          <el-date-picker
            v-else
            v-model="formData2.expirationDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="核定载质量"
          prop="allowableWeight"
        >
          <span v-if="isShow">{{ formData2.allowableWeight }}</span>
          <el-input
            v-else
            v-model="formData2.allowableWeight"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="有效期"
          prop="validityPeriod"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
          <span v-if="isShow">{{ formData2.validityPeriod }}</span>
          <el-date-picker
            v-else
            v-model="formData2.validityPeriod"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="图片信息"
          style="margin-left: 8px; width: 1000px"
        >
          <img
            v-if="isShow"
            :src="formData2.picture
            "
            alt=""
          >
          <div
            v-else
            class="pic"
          >
            <el-upload
              action="#"
              list-type="picture-card"
              :on-change="upPic"
            >
              <i
                slot="default"
                class="el-icon-plus"
              ></i>
              <div
                slot="file"
                slot-scope="{file}"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="formData2.picture"
                alt=""
              >
            </el-dialog>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button
          v-if="isShow"
          type="warning"
          @click="editInfo"
        >编辑</el-button>
        <div
          v-else
          class="btn"
        >
          <el-button>取消</el-button>
          <el-button
            type="warning"
            @click="updateDirver"
          >保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { truckTypeDetail, truckTypeUpdate, truckTypeDrivingLicenseDetail, truckTypeDrivingLicense } from '@/api/transit'
export default {
  data() {
    return {
      title: ['基本信息', '行驶证信息'],
      currentIndex: 0,
      isShow: true,
      formData: {
        id: null,
        licensePlate: '', // 车牌号码
        truckTypeName: '', // 车型名称
        allowableVolume: '', // 车辆体积
        allowableLoad: '', // 车辆重量
        deviceGpsId: null // GPSID
      }, // 车辆信息
      formRules: {
        id: [
          { required: true, message: '请输入车辆编号', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' }
        ],
        truckTypeName: [
          { required: true, message: '请输入车型名称', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '请输入车辆体积', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '请输入车辆载重', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '请输入GPSID', trigger: 'blur' }
        ]
      },
      // 行驶证信息
      formData2: {
        transportCertificateNumber: null, // 行驶证号码
        engineNumber: null, // 发动机号码
        registrationDate: null, // 注册时间
        mandatoryScrap: null, // 报废时间
        overallQuality: null, // 整备质量
        expirationDate: null, // 检验有效期
        allowableWeight: null, // 核定载质量
        validityPeriod: null // 有效期
      },
      formRules2: {
        transportCertificateNumber: [
          { required: true, message: '请输入行驶证号码', trigger: 'blur' }
        ],
        engineNumber: [
          { required: true, message: '请输入发动机号码', trigger: 'blur' }
        ],
        registrationDate: [
          { required: true, message: '请选择注册时间', trigger: 'blur' }
        ],
        mandatoryScrap: [
          { required: true, message: '请选择报废日期', trigger: 'blur' }
        ],
        overallQuality: [
          { required: true, message: '请输入整备质量', trigger: 'blur' }
        ],
        expirationDate: [
          { required: true, message: '请选择检验有效期', trigger: 'blur' }
        ],
        allowableWeight: [
          { required: true, message: '请输入核定载质量', trigger: 'blur' }
        ],
        validityPeriod: [
          { required: true, message: '请选择有效期', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      disabled: false,
      dialogImageUrl: ''
    }
  },
  computed: {
    // 获取id
    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.getCarInfo()
    this.getDirverInfo()
  },
  methods: {
    // tab切换
    tabChange(index) {
      this.currentIndex = index
    },
    // 获取车辆详情
    async getCarInfo() {
      const res = await truckTypeDetail(this.id)
      this.formData = res.data
    },
    // 编辑
    editInfo() {
      this.isShow = false
    },
    // 更新车辆信息
    editCarInfo() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 校验通过后的逻辑
          await truckTypeUpdate(this.id, this.formData)
          // 弹窗提示成功
          this.$message.success('修改成功')
          this.isShow = true
          this.$router.back()
        }
      })
    },
    // 获取行驶证基本信息
    async getDirverInfo() {
      const res = await truckTypeDrivingLicenseDetail(this.id)
      this.formData2 = res.data
    },
    // 上传图片
    upPic(file) {
      this.formData2.picture = file.url
    },
    // 提交行驶证
    updateDirver() {
      this.$refs.form2.validate(async valid => {
        if (valid) {
          // 校验通过的逻辑
          await truckTypeDrivingLicense(this.id, this.formData2)
          // 弹框提示
          this.$message.success('修改成功')
          this.isShow = true
          this.$router.back()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}

.tab-bar {
  display: flex;
  border-bottom: 1px solid #ccc;

  h3 {
    margin-right: 20px;
    font-weight: 400;
    cursor: pointer;
  }

  .active {
    font-weight: 700;
    border-bottom: 3px solid #e15536;
  }
}

.content {
  margin-left: 40px;
  margin-top: 30px;

  .form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      display: flex;
      margin-right: 50px;

      span {
        margin-left: 30px;
        display: block;
        width: 450px;
        color: #ccc;
      }

      .el-input {
        margin-left: 30px;
        width: 450px;
      }

      img {
        padding-top: 15px;
        padding-left: 10px;
        width: 212px;
        height: 160px;
      }
    }
  }
}

.btn {
  margin-top: 300px;
  text-align: center;
}
</style>

